var SearchForm = function () {
  var template = /* html */ `
    <div class="search-form">
      <sys-common-search ref="commonSearch" :search="search" :response-filter-fun="responseFilterFun" :search-field="searchField"
        :dropdown-props="dropdownProps" input-width="200px" >
        <template slot="append">
          <el-form-item label="状态">
            <el-select clearable v-model="search.status" style="width:200px">
              <el-option v-for="item in statusList" :key="item.value" :value="item.value" :label="item.label">
              </el-option>
            </el-select>
          </el-form-item>
        </template>
      </sys-common-search>
    </div>
  `;

  return {
    props: {
      search: {
        type: Object,
        required: true
      },
      data: {
        type: Array,
        default: function () {
          return [];
        }
      }
    },

    watch:{
      data:function(){
        if (this.$refs['commonSearch']) {
          this.$refs['commonSearch'].resetDropdownData();
        }
      }
    },

    data: function () {
      return {
        searchField: ['bankCardNumber', 'bank'],
        statusList: i18n.getDropDown('financeMgr.bankCardSetting.status', [1, 2]),
        dropdownProps: {
          bankCardNumber: "银行卡号",
          bank: "所属银行"
        }
      };
    },

    methods: {
      responseFilterFun: function () {
        return Promise.resolve(this.data);
      }
    },

    components: {
      SysCommonSearch: SysCommonSearch
    },

    template: template
  };
}();
